<template>

    <!-- <div  class="my-flow" id="my-flow"> -->
            
            
            <Maxmin :percent="percent"  @updatePercent="updatePercent"></Maxmin>
        <div  class="flow-container" id="flow-container"  :style="{'transform': 'scale('+(percent/100)+')'}"
            @mousemove="mousemove"
        >
            <FlowRender :nodeData="item" v-for="(item) in flowData" :key="item.nodeId" :readonly="readonly"></FlowRender>
        </div>
            
        
        
    <!-- </div> -->
    
</template>

<script setup>
    import { ref ,onMounted, nextTick,defineProps, toRefs, provide} from 'vue';
    import FlowRender from './components/render.vue'
    import Maxmin from './components/maxmin.vue'
    import emitter from '../../utils/emitter';

    import { addNode, removeNode } from '../../utils/flowUtil';
   const props = defineProps({
        flowData:[],
        readonly: {
            type: Boolean,
            default: false
        },

    })
    const nodeId = ref('');
    const {flowData} = toRefs(props)
    const position = ref({});
    // 菜单 显示 隐藏
    const menuShow = ref(false)
    const dynclass = ref()
    let menuTimer = null ;
    const percent = ref(100)
  

    const updatePercent = (num) => {
        const value = percent.value + num;
        if(value<= 200 && value >= 10){
            percent.value = value;
        }
    }
    provide('addNode', (data) => {
        menuShow.value = false;
        addNode(flowData.value, {
            nodeId: data.nodeId,
            nodeType: data.nodeType
        } )
    })
    

    const nodeClickEmits = defineEmits(['nodeClick']);
    emitter.on('nodeClick', data => {
       
        nodeClickEmits('nodeClick', data.nodeId, data);
    })
    emitter.on('removeNode', data => {
        removeNode(flowData.value, data )
        return ;
   })

    // emitter.on('addNode', param => {
    //     addNode(flowData, param)
    // })

    // 鼠标进入菜单
    const mouseenter = (e) => {
        // 移除定时器
        if (menuTimer) clearTimeout(menuTimer);
        menuShow.value = true;
    }

    const mouseleave = (e) => {
        menuTimer = setTimeout(() => {
            menuShow.value = false;
        }, 200);
    }

   
</script>

<style  >
    span{
        font-size: 12px;
    }
    div{
        font-size: 12px;
    }
    .my-flow{
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        background-color: var(--global-flow-background-color);
    }
    #my-flow{
        height: 100%;
    }
    /* .my-flow{
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
       
        background-color: var(--global-flow-background-color);
    } */
    .flow-container{
        position: relative;
        width: 100%;
        /* height: 100%; */
        padding-top: 10px;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        min-width: -moz-min-content;
        min-width: min-content;
        transform-origin: 50% 0px 0px;
        background-color: var(--global-flow-background-color);
    }
    
    /* 滚动条整体样式 */
    .my-flow::-webkit-scrollbar {
        width: 12px; /* 适用于垂直滚动条 */
        height: 12px; /* 适用于水平滚动条 */
        }

        /* 滚动条的滑块部分 */
    .my-flow::-webkit-scrollbar-thumb {
        background-color: #c2c2c2; /* 滑块颜色 */
        border-radius: 6px; /* 滑块圆角 */
        border: 2px solid transparent; /* 滑块边框，可以设置为透明或颜色 */
        }

        /* 滚动条的轨道部分 */
    .my-flow::-webkit-scrollbar-track {
        background-color: #f0f0f0; /* 轨道颜色 */
        border-radius: 6px; /* 轨道圆角 */
        }

        /* 鼠标悬停在滚动条上时的样式 */
    .my-flow::-webkit-scrollbar-thumb:hover {
        background-color: #a6a6a6; /* 鼠标悬停时滑块颜色加深 */
        }

        /* 滚动条滑块被滚动时的样式 */
    .my-flow::-webkit-scrollbar-thumb:active {
        background-color: #8c8c8c; /* 滚动时滑块颜色更深 */
        }
</style>